<template>
	<div class="admList">
		<div class="div1">
			<div class="div1-1">
				<p class="div1-1-p1"><i class="el-icon-s-data"></i>热度图片列表</p>
			</div>
			<el-button @click="go2Add(hot.id)" class="addhotpic"><i
					class="el-icon-document-delete"></i>添加新的热度图片</el-button>
			<button><i class="el-icon-refresh-right"></i></button>
		</div>

		<hr>
		<el-table :data="hotList" :cell-style="{textAlign:'center'}" :header-cell-style="{textAlign:'center'}" border
			style="width: 100%; margin-top: 20px;">

			<el-table-column fixed prop="memo" label="描述">
			</el-table-column>

			<el-table-column fixed prop="type" label="类型">
			</el-table-column>

			<el-table-column fixde prop="hot" label="优先级">
			</el-table-column>

			<el-table-column fixed prop="picture" label="图片">
				<template slot-scope="scope">
					<div>
						<img v-bind:src="`${$imgurl}/api/public/showimg/${scope.row.picture}`"
							style="height: 60px; width: 60px;" />
					</div>
				</template>
			</el-table-column>
			<el-table-column fixde prop="adm" label="管理">
				<template #default="{row}">
					<el-button class="btnSet" @click="go2Update(row.id)"><i class="el-icon-edit"></i>编辑</el-button>
					<el-button type="info" class="btnDel" @click="del(row.id)"><i
							class="el-icon-delete"></i>删除</el-button>
				</template>
			</el-table-column>
			</el-table-column>
		</el-table>
	</div>

</template>

<script>
	export default {
		name: 'AdmList',
		data() {
			return {
				// value: true,
				hotList: [],
				hot: {}
			}
		},
		methods: {
			// 跳转到添加页面
			go2Add(id) {
				this.$router.push({
					path: '/adm/hotPicAdd',
					query: {
						id: 0 
					}
				})
			},

			go2Update(id) {
				console.log(id);
				// this.$get("/api/adm/hot/findById/" + id)
				// 	.then((resp) => {
				// 		console.log(resp.data);
				// 		this.hot = resp.data.data;
				// 	})
				this.$router.push({
					path: '/adm/hotPicAdd',
					query: {
						id:id
					}
				})
			},
			//删除
			del(id) {
				this.$get("/api/adm/hot/remove/" + this.id)
					.then((resp) => {
						console.log(resp.data);
					})
			}
		},
		mounted() {
			// findAll(){
			this.$get("/api/adm/hot/findAll")
				.then((resp) => {
					console.log(resp.data);
					this.hotList = resp.data.data;
				})
			// }
		}
	}
</script>

<style scoped>
	/* <!-- 右侧功能 */
	.admList {
		margin-left: 20px;
		width: 100%;
		height: 600px;
		line-height: 50px;
	}

	.div1 {
		margin-top: 18px;
		display: flex;
		justify-content: space-between;
		margin-bottom: -9px;
	}

	.div1-1 {
		display: flex;
	}

	.div1-1-p1 {
		font-size: 18px;
	}

	.div1 .addhotpic {
		width: 300px;
		color: white;
		background-color: #87ceeb;
	}

	.div1 button {
		background-color: #189F92;
		border: none;
		width: 55px;
		height: 38px;
		margin-top: 7px;
		border-radius: 2px;
	}

	/* 刷新图标 */
	.el-icon-refresh-right {
		color: white;
		font-size: 22px;
	}

	.admList hr {
		border: 1px gainsboro solid;
	}


	.btnDel {
		background-color: #1dc6b5;
		color: white;
		border: none;
		height: 35px;
		width: 80px;
		border-radius: 3px;
	}

	.btnSet {
		background-color: skyblue;
		color: white;
		border: none;
		height: 35px;
		width: 80px;
		/* margin-left: 30px; */
		border-radius: 3px;
	}
</style>